<template>
  <div id="home">
    <a-affix :offset-top="top">
      <div class="top">
        <div class="content">
          <div class="logo">
            <a href="../home">
              <img src="https://19jwshow.oss-cn-shenzhen.aliyuncs.com/wdad/logo/LOGO_home.png" alt="">
              <span>Website Design And Development</span>
            </a>
          </div>
          <div class="list">
            <ul>
              <li v-for="(item,i) in navList" :class="item.topUrl==activeNav ? 'active' : ''">
                <router-link :to="item.topUrl">{{ item.text }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </a-affix>
    <div class="banner">
      <!--      轮播图-->
      <div class="banner-img">
        <!-- 渐显 effect="fade" -->
        <a-carousel autoplay>
          <div v-for="(item,i) in banner">
            <h3>
              <img :src="item.url" alt="">
            </h3>
          </div>
        </a-carousel>
      </div>
      <!-- 标题 网站设计与开发 -->
      <div class="banner-txt">
        <h1>网站设计与开发</h1>
        <div class="line"></div>
        <h2>中山市技师学院世赛集训基地欢迎你！</h2>
      </div>
    </div>
    <!--    社团简介-->
    <div class="introduce">
      <div class="content">
        <h2>社团介绍</h2>
        <p>{{commIntro}}</p>
        <img ref="massIntro" :src="urlIntro" alt="">
      </div>
    </div>
    <!--    获奖荣誉-->
    <div class="honor">
      <h2>获奖荣誉</h2>
      <div class="inner" id="bearPalm">
        <swiper
            @swiper="setControlledSwiper"
            :width="570"
            :grab-cursor="true"
            :slide-to-clicked-lide="true"
            :space-between="80"
            :freeMode="{momentum: true,momentumBounce: false,}"
            :autoplay="{autoplay:true,}"
            :loop="true"
            :loop-additional-slides="2"
        >
          <swiper-slide v-for="(item,i) in honorBan">
            <div class="honor-box">
              <img :src="item.award_img" alt="">
              <span class="honor-time" >{{honorTimeA}}</span>
              <h3 class="honor-name">{{item.award_username}}</h3>
              <p>{{item.award_content}}</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!--    人员介绍-->
    <div class="peo-introduce">
      <h2>人员介绍</h2>
      <swiper
          @swiper="setControlledSwiper"
          :width="440"
          :grab-cursor="true"
          :slide-to-clicked-lide="true"
          :space-between="60"
          :freeMode="{momentum: true,momentumBounce: false}"
          :autoplay="{autoplay:true,disableOnInteraction: false,delay: 2000,}"
          :loop="true"
          :observeParents="false"
          :observer="true"
          :loop-additional-slides="2"

          :pagination="{type:'progressbar'}"
      >
<!--        :scrollbar="{draggable: true,dragSize: 'auto',}"-->
        <swiper-slide v-for="(item,i) in proIntr">
          <img :src="item.image" alt="">
          <div class="info">
            <h3>{{item.username}}</h3>
            <span>{{item.introduce}}</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!--  学习环境  -->
    <div class="learn-environ">
      <h2>学习环境</h2>
      <div class="inner" id="stuBan">
        <swiper ref="stuSwi1" id="stuSwi1"
                @swiper="setControlledSwiper"
                :width="600"
                :grab-cursor="true"
                :slide-to-clicked-lide="true"
                :space-between="60"
                :freeMode="{momentum: true,momentumBounce: false,}"
                :autoplay="{autoplay:true,disableOnInteraction: false,delay: 2000,}"
                :loop="true"
                :observeParents="false"
                :observer="true"
                :loop-additional-slides="2"
        >
          <swiper-slide v-for="(item,i) in studyBan">
            <img :src="item.url" alt="">
          </swiper-slide>
        </swiper>
      </div>
      <div class="inner stuSwi2" id="stuBan2">
        <swiper ref="stuSwi2"
                @swiper="setControlledSwiper"
                :width="600"
                :grab-cursor="true"
                :slide-to-clicked-lide="true"
                :space-between="60"
                :freeMode="{momentum: true,momentumBounce: false,}"
                :autoplay="{autoplay:true,disableOnInteraction: false,delay: 2000,}"
                :loop="true"
                :observeParents="false"
                :observer="true"
                :loop-additional-slides="2"
                :controller="{control:'#stuSwi1'}"
                :scrollbar="{draggable: true,}"
        >
          <swiper-slide v-for="(item,i) in studyBan">
            <img :src="item.url" alt="">
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <public-bot></public-bot>
  </div>
</template>
<script>

// 引入轮播图所需的文件
import SwiperCore, {Autoplay, Scrollbar, Pagination, Navigation, A11y} from 'swiper'
import {Swiper, SwiperSlide} from 'swiper/vue/swiper-vue'
import 'swiper/swiper.less'
import 'swiper/swiper-bundle.css'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper-bundle'
import {ref, defineComponent, reactive, onMounted, toRefs, nextTick, getCurrentInstance} from 'vue'
import router from '@/router'
import PublicBot from "../../components/publicBot";
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';

SwiperCore.use([Autoplay, Scrollbar, Pagination, Navigation, A11y])

export default defineComponent({
  name: 'home',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  components: {
    PublicBot,
    Swiper,
    SwiperSlide,
    LeftCircleOutlined,
    RightCircleOutlined,
  },
  setup() {
    const {proxy} = getCurrentInstance()

    const data = reactive({
      controlledSwiper: null
    })
    const methods = {
      setControlledSwiper(swiper) {
        data.controlledSwiper = swiper
      }

    }
    let navList = [
      {text: '首页', topUrl: '/home'},
      {text: '学习时间', topUrl: '/study/studyTime'},
      {text: '学习进度', topUrl: '/study/studySchedule'},
      {text: '学习周报', topUrl: '/weekly/weeklySearch'},
    ]
    let activeNav = ref('')

    //头部轮播图
    let banner = ref('')
    let banUrl = ref('')
    proxy.$request('get','/api/v1/user/indexBanner',{}).then(res =>{
      banner.value = res.data
      for (let j=0;j<res.data.length;j++){
        banUrl.value = res.data[j].url
      }
    })

    //社团介绍
    let massIntro = ref("");
    onMounted(() => {
      // 3d抖动
      VanillaTilt.init(massIntro.value)
      activeNav.value = router.currentRoute.value.href

      //滚动条事件
      window.addEventListener('scroll',windowScroll)
    })

    function windowScroll() {
      // 滚动条距离页面顶部的距离
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
      if (scrollTop > 1600){
        document.getElementById("bearPalm").style.padding = '0'
      }else if(scrollTop > 3565){
        document.getElementById("stuBan").style.padding = '0'
        document.getElementById("stuBan2").style.padding = '0'
      }
    }

    let commIntro = ref('')
    let urlIntro = ref('')
    proxy.$request('get','api/v1/user/introduces',{}).then(res =>{
      commIntro.value = res.data[0].community_introduce
      urlIntro.value = res.data[0].introduce_image
    })


    //获奖荣誉
    let honorBan = ref('')
    let honorTime = ref('')
    let honorTimeA = ref('')
    const honTimeArr = ref([])
    proxy.$request('get','/api/v1/user/award',{}).then(res=>{
      honorBan.value = res.data
      // console.log(res)
      for (let j=0;j<res.data.length;j++){
        honorTime = timestampToTime(res.data[j].create_time)
        honTimeArr.value.push(honorTime)
        honorTimeA.value = honTimeArr._rawValue[j]
      }
    })
    function timestampToTime(timestamp) {
      var date = new Date(timestamp*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      let D = date.getDate() + ' ';
/*
      let h = date.getHours() + ':';
      let m = date.getMinutes() + ':';
      let s = date.getSeconds();
*/
      return Y+M+D;
    }
    //人员介绍
    let proIntr = ref('')
    proxy.$request('get','/api/v1/user/personIntroduces',{}).then(res=>{
      proIntr.value = res.data
      console.log(res)

    })

    //学习环境
    let stuSwi1 = ref('')
    let stuSwi2 = ref('')

    let studyBan = ref('')
    proxy.$request('get','/api/v1/user/learnEnvironment',{}).then(res=>{
      console.log(res)
      studyBan.value = res.data
    })
    // stuSwi2.controller.control=stuSwi1
    return {
      ...toRefs(data),
      ...methods,
      massIntro,
      commIntro,
      navList,
      activeNav,
      banUrl,
      banner,
      urlIntro,
      honorBan,
      stuSwi1,
      stuSwi2,
      honorTime,
      honorTimeA,
      honTimeArr,
      studyBan,
      proIntr,

    }
  },

})

</script>

<style lang="less">

#home {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'PingFang SC';

  .active a {
    color: #6777EF !important;
  }

  a {
    text-decoration: none;
  }

  ul li {
    list-style: none;
  }

  h1, h2, h3 {
    margin: 0;
  }

  //导航栏
  .top {
    position: relative;
    top: 0;
    left: calc(50% - 1920px/2);
    width: calc(100% + 8px);
    height: 64px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04);
    backdrop-filter: blur(80px);
    background: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    z-index: 99;
    .content {
      width: 1200px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      display: flex;
      justify-content: space-between;
      z-index: 99;

      .logo {
        z-index: 99;
        cursor: pointer;

        span {
          color: #6777EF;
          font-weight: 600;
          margin-left: 12px;
          font-size: 16px;
        }
      }

      .list {
        z-index: 99;
        width: 474px;
        height: 64px;
        line-height: 64px;

        ul {
          width: 474px;
          display: flex;
          justify-content: space-between;

          li {
            float: left;

            a {
              font-size: 14px;
              color: #000;
              cursor: pointer;

            }
          }
        }
      }
    }
  }

  .banner {
    width: 100%;
    height: 875px;

    //网站设计与开发  欢迎！
    .banner-txt {
      text-align: center;
      position: absolute;
      top: 345px;
      left: 50%;
      transform: translate(-50%, 0);
      animation: title 1.5s ease;
      opacity: 1;

      h1, h2 {
        color: #fff;
        margin: 0;
      }

      h1 {
        font-size: 96px;
        letter-spacing: 12px;
      }

      .line {
        width: 686px;
        height: 2px;
        background: #FFFFFF;
        margin: 36px auto 36px;
      }

      h2 {
        font-size: 36px;
      }
    }

    @keyframes title {
      from {
        top: 20px;
        opacity: 0;
      }
      to {
        top: 345px;
        opacity: 1;
      }
    }

    //轮播图
    .banner-img {
      width: 100%;
      //height: 1036px;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;

      .ant-carousel {
        div {
          h3 {
            img {
              width: 100%;
              height: 938px;
            }
          }
        }

        .slick-dots {
          position: absolute;
          bottom: 62px;

          .slick-active {
            button {
              background: #6777EF;
            }
          }

          li {
            margin: 0 15px;

            button {
              width: 15px;
              height: 15px;
              background: #fff;
              border-radius: 50%;
              opacity: 1;
            }
          }
        }
      }
    }
  }

  //社团介绍
  .introduce {
    width: 100%;
    background: #F9FAFF;
    padding: 60px 0;
    .content {
      width: 1200px;
      margin: 0 auto;
      text-align: center;
      h2 {
        color: #262626;
        font-size: 44px;
        text-align: center;
      }
      p {
        width: 1210px;
        font-size: 32px;
        text-align: left;
        color: #465059;
        margin: 25px auto 25px;
        line-height: 60px;
      }
      /*img{
        width: 1200px;
      }*/

    }
  }

  //  获奖荣誉
  .honor {
    width: 100%;
    background: #161616;
    padding: 60px 0 30px;

    h2 {
      font-size: 48px;
      color: #FFFFFF;
      letter-spacing: 4px;
      text-align: center;
      margin-bottom: 60px;
    }

    .inner {
      padding-left: 350px;
      display: flex;
      margin-bottom: 60px;

      .swiper {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .swiper-wrapper {
          /*width: 570px;*/
          width: 100%;

          .swiper-slide {
            width: 570px !important;
            height: 726px;

            margin: 0;

            .honor-box {
              width: 570px;
              height: 726px;
              text-align: left;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              span, h3 {
                font-size: 24px;
                color: #fff;
              }

              p {
                color: #cccaca;
                font-size: 18px;
                line-height: 44px;
              }
            }
          }
        }
      }
    }
  }

  //  人员介绍
  .peo-introduce {
    width: 100%;
    height: 100%;
    padding: 60px 0;

    h2 {
      text-align: center;
      font-size: 48px;
      color: #262626;
    }

    .swiper {
      /*width: 100%;*/
      width: 1200px;
      padding-bottom: 50px;
      position: relative;
      .swiper-pagination{
        position: absolute;
        top: 708px;
      }
      .swiper-wrapper {
        width: 100%;
        display: flex;
        /*padding-left: 350px;*/
        margin: 60px 0;
        /*overflow: hidden;*/
        .swiper-slide {
          width: 440px !important;
          height: 560px;
          margin-right: 40px !important;
          img {
            width: 440px;
            height: 560px;
            object-fit: cover;
          }
          .info {
            width: 100%;
            height: 95px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            bottom: 0;
            text-align: center;
            padding: 15px 0 0 0;

            h3 {
              font-size: 24px;
              color: #fff;
            }

            span {
              font-size: 18px;
              color: #c6c6c6;
            }
          }
        }
      }

      .swiper-scrollbar{
        /*margin-left: 350px;*/
        background: #D9D9D9;
        width: 1200px;
        height: 5px;
        &:hover{
          cursor: pointer;
        }
        .swiper-scrollbar-drag{
          position: absolute;
          left: -178px;
        }
      }


    }

  }

  // 学习环境
  .learn-environ {
    width: 100%;
    padding: 60px 0;
    background: #FAFAFF;

    h2 {
      color: #262626;
      font-size: 48px;
      text-align: center;
    }
    .stuSwi2{
      padding-bottom: 80px;
    }
    .inner {
      width: 100%;
      height: 100%;
      padding-left: 350px;
      display: flex;
      margin-bottom: 40px;

      .swiper {
        width: 100%;
        height: 100%;
        margin: 60px 0 0 0;

        .swiper-wrapper {
          width: 1800px;
          display: flex;

          .swiper-slide {
            width: 600px !important;
            margin-right: 40px;
          }

        }

      }
    }

    .stu-list {
      overflow: hidden;

      ul {
        display: flex;
        margin-top: 60px;
        padding-left: 350px;

        li {
          margin-right: 40px;

          img {
          }
        }
      }
    }
    .swiper-scrollbar{

      width: 1200px;
      z-index: 99;
      position: relative;
      top: 385px;
      .swiper-scrollbar-drag{
        width: 400px;
        z-index: 99;
      }
    }

  }


  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-horizontal::-webkit-scrollbar {
    display: none;
  }

  #ceshi {
    .ant-carousel .slick-slide {
      text-align: center;
      height: 160px;
      line-height: 160px;
      background: #364d79;
      overflow: hidden;
    }

    .ant-carousel .slick-arrow.custom-slick-arrow {
      width: 25px;
      height: 25px;
      font-size: 25px;
      color: #fff;
      background-color: rgba(31, 45, 61, 0.11);
      opacity: 0.3;
      z-index: 1;
    }

    .ant-carousel .custom-slick-arrow:before {
      display: none;
    }

    .ant-carousel .custom-slick-arrow:hover {
      opacity: 0.5;
    }

    .ant-carousel .slick-slide h3 {
      color: #fff;
    }
  }

  // 底部
  .footer {
    width: 100%;
    height: 66px;
    background: #fff;

    ul {
      width: 1200px;
      height: 66px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      li {
        a {
          color: #000;
          font-size: 14px;
          line-height: 66px;
          float: left;
        }

        .connect-us:hover + #qr-code {
          display: block;
          transition: all 1s ease;
          animation: conUs 1s ease;
        }

        #qr-code:hover {
          display: block;
          transition: all 1s ease;
          animation: conUs 1s ease;
        }

        @keyframes conUs {
          from {
            display: none;
            opacity: 0;
          }
          to {
            display: block;
            opacity: 1;
          }
        }

        #qr-code {
          width: 66px;
          display: none;
          float: left;
        }

        .copyright {
          color: #262626;
        }

      }

    }
  }
}

</style>
